<!--新的页面-->

<template>
  <div>
    <el-breadcrumb separator="/" class="submenu">
      <el-breadcrumb-item>首页</el-breadcrumb-item>
      <el-breadcrumb-item>
        <a href="/">新增公告</a>
      </el-breadcrumb-item>
    </el-breadcrumb>
    <div class="main-table">
      <el-form :model="form" :rules="rules" ref="form">
        <el-form-item label="标题">
          <el-input v-model="form.noticeTitle" style="width:500px" :disabled=isEdit></el-input>
        </el-form-item>
        <el-form-item label="类型">
          <el-radio-group v-model="form.noticeType" @change="typeChange" :disabled=isEdit>
            <el-radio label="1">站内信息</el-radio>
            <el-radio label="2">门户信息</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="内容类别" v-if="isShow" :disabled=isEdit>
          <el-select v-model="form.contentType" placeholder="请选择">
            <el-option v-for="item in selectContentData" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="附件上传" >
           <!-- <el-upload class="upload-demo" :disabled=isEdit ref="upload" :action=actionUrl :limit="1" :data=otherData :on-success="uploadSuccess" :file-list="fileList">
            <el-button size="small" type="primary">点击上传</el-button>
          </el-upload>  -->
          <el-upload
          class="upload-file"
          ref="upload"
          :action=actionUrl
          :data=otherData
          :limit="1"
          :on-success="uploadSuccess"         
          :file-list="fileList">
          <el-button slot="trigger" type="primary" :disabled=isEdit>选取文件</el-button>
        </el-upload>       
      </el-form-item>
        <el-form-item label="失效日期">
          <el-date-picker v-model="form.invalidTime" type="date" placeholder="选择日期" :disabled=isEdit>
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <UE :defaultMsg="defaultMsg" :config="config" id="ue1" ref="ue"></UE>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer" v-if="isShowButton">
        <el-button type="primary" icon="el-icon-time" @click="saveOrPublish('/system/notice/save')">保存</el-button>
        <el-button type="success" icon="el-icon-success" @click="saveOrPublish('/system/notice/saveAndPulish')">发布</el-button>

      </div>
    </div>
  </div>
</template>
<script>
  import UE from '@/components/common/ue/ue.vue';
  import SelectTable from '@/components/common/select-ext/select-table';
  import qs from 'qs';
  export default {
    components: {
      UE,
      SelectTable
    },
    data() {
      return {
        isShow: false, 
        isFileShow : false, 
        isEdit:false,
        isShowButton : true,
        defaultMsg: '',
        config: {
          initialFrameWidth: null,
          initialFrameHeight: 350,
          enableAutoSave: false,
           readonly: false
        },
        form: {
          attFileUrl: '',
          attFileName: '',
          contentType: '',
          noticeType: "1",
          content : ''
        },
        formLabelWidth: '120px',
        rules: {

        },
        otherData: {
          busAction: "busaction",
          tableName: "table"
        },
        selectContentData: [{
            label: '采购公告',
            value: 1
          },
          {
            label: '网站公告',
            value: 2
          },
          {
            label: '新闻政策',
            value: 3
          },
          {
            label: '用户须知',
            value: 4
          }
        ],
        fileList: [],

actionUrl: this.lib.config.host.system + '/common/fileupload/upload'
      };
    },
    mounted() {
      if(this.$route.query.noticeId !=''){
          this.axios.post(this.lib.config.host.system + '/system/notice/findById/'+this.$route.query.noticeId).then((response) =>{
            debugger;
              this.form = response.data;
               this.form.noticeType = response.data.noticeType+"";
               this.defaultMsg = response.data.content+"";
               this.isEdit=true;
               this.isFileShow = true;
               this.isShowButton = false;
               this.$refs.ue.disable();
          })
          
      }
    },
    methods: {
      saveOrPublish(url) {
        //let content = this.$refs.ue.getUEContentTxt(); // 调用子组件方法
       let content = this.$refs.ue.getUEContent();
        this.form.content =content;
        this.axios.post(this.lib.config.host.system + url, qs.stringify(this.form)).then((response) =>{
          this.$message({
              type: 'success',
              message: '保存成功!'
            });
           this.$router.push({
            path: '/Index/System/Notice',
          })
        }).catch((error) => {
           this.$message({
              type: 'info',
              message: '删除成功!'
            });
        })
      },
    
      uploadSuccess: function (response) {
        debugger;
        //附件上传成功回调
        this.form.attFileUrl = response.url;
        this.form.attFileName = response.fileName
      },
      typeChange(value) {
        debugger;
        if (value == 2) {
          this.isShow = true;
        } else {
          this.isShow = false;
          this.form.contentType = ''
        }
      }
 



    }
  }

</script>
<style>
  .upload-file{
    display: flex;
    flex-direction: row-reverse;
    height: 40px;
  }

  .upload-file .el-upload-list {
    display: flex;
    flex-direction: row;
    width: calc(100% - 112px);
    border: 1px solid #dcdfe6;
    margin-right: 16px;
    border-radius: 4px;
  }

  .upload-file .el-upload-list li{
    margin-top: 0;
    line-height: 38px;
    vertical-align: middle;
  }

  .upload-file .el-upload-list li .el-icon-close{
    line-height: inherit;
    top:0;
  }
</style>
